<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenLite.min.js"></script>
  <script src="https://unpkg.com/vue"></script>
	</head>
	<body>
		<div id="app" >
			 
			 <svg width="200" height="200">
				 <polygon v-bind:points="points" ></polygon>
				 <circle cx="100" cy="100" r="90"></circle>
			 </svg>
			 <label>sides:{{sides}}</label>
			 <input type="range" min="3" max="500" v-model.number="sides" />
			 <label>mininum sides:{{minRadius}}</label>
			 <input type="range" min="0" max="90" v-model.number="minRadius" />
			 <label>updateInterval:{{updateInterval}} milliseconds</label>
			 <input type="range" min="10" max="2000" v-model.number="updateInterval" />
		</div>
		<script type="text/javascript">

			 /**
			  *
			 就像 Vue 的过渡组件一样，数据背后状态过渡会实时更新，这对于原型设计十分有用。当你修改一些变量，
			 即使是一个简单的 SVG 多边形也可实现很多难以想象的效果。
			 进度条的实现
			 多变现的实现，多边形定时动态活动
			  */
			 let app=new Vue({
				 el:'#app',
				 data:function(){
					let defaultSides=10;
					let status=Array.apply(null,{length:defaultSides}).map(function(){
						return 100;
					});
					return {
						stats:status,
						points:generatePoints(status),
						sides:defaultSides,
						minRadius:50,
						interval:null,
						updateInterval:500,
					}
				 },
				 watch:{
					 sides:function(newSides,oldSides){
						 let sidesDifference=newSides-oldSides;
						 if(sidesDifference>0){
							 for(let i=1;i<=sidesDifference;i++){
								 this.stats.push(this.newRandomValue());
							 }
						 }else{
							let absoluteSidesDifference = Math.abs(sidesDifference);
							for (let i = 1; i <= absoluteSidesDifference; i++) {
							   this.stats.shift();
							}
						 }
					 },
					  stats: function(newStats) {
					             TweenLite.to(this.$data, this.updateInterval / 1000, {
					               points: generatePoints(newStats)
					             });
					           },
					 updateInterval: function() {
					             this.resetInterval();
					           }
				 },
				 mounted: function() {
				           this.resetInterval();
				         },
				 methods:{
					 randomizeStats:function(){
						 let vm=this;
						 this.stats=this.stats.map(function(){
							return vm. newRandomValue();
						 });
					 },
					 newRandomValue:function(){
						 return Math.ceil(this.minRadius+Math.random()*(100-this.minRadius));
					 },
					 resetInterval:function(){
						 let vm=this;
						 clearInterval(this.interval);
						 this.randomizeStats();
						 this.interval=setInterval(function(){
							 vm.randomizeStats();
						 }
						 ,this.updateInterval)
					 }
				 }
				 
			 })
			 function valueToPoing(value,index,total){
			 	let x=0;
			    let y=-value*0.9;
				let angle=((Math.PI*2)/total)*index;
				let cos=Math.cos(angle);
				let sin=Math.sin(angle);
				let tx=x*cos-y*sin+100;
				let ty=x*sin+y*cos+100;
				return {x:tx,y:ty};
			 }
			 function generatePoints(stats){
				 let total=stats.length;
				 return stats.map(function(stat,index){
					 var point=valueToPoing(stat,index,total);
					 return point.x+","+point.y;
				 }).join(" ");
			 }
		</script>	
		<style type="text/css">
			 svg {
			        display: block;
			      }
			      polygon {
			        fill: #41b883;
			      }
			      circle {
			        fill: transparent;
			        stroke: #35495e;
			      }
			      input[type="range"] {
			        display: block;
			        width: 100%;
			        margin-bottom: 15px;
			      }
		</style>
	</body>
</html>
